﻿@using Abp.MultiTenancy
@using Abp.Timing
@using AbpZeroTemplate.Authorization
@using AbpZeroTemplate.Chat.SignalR
@using AbpZeroTemplate.Editions
@using AbpZeroTemplate.Features
@using AbpZeroTemplate.Web.Areas.AppAreaName.Models.Layout
@using AbpZeroTemplate.Web.Areas.AppAreaName.Views.Shared.Components.AppAreaNameMenu
@using AbpZeroTemplate.Web.Theme
@inject IUiThemeCustomizer UiThemeCustomizer
@model HeaderViewModel
@{
    Layout = null;
    var isChatEnabled = SignalRFeature.IsAvailable && (AbpSession.MultiTenancySide == MultiTenancySides.Host || IsFeatureEnabled(AppFeatures.ChatFeature));
    var theme = UiThemeCustomizer.SelectedTheme;
}
<header class="m-grid__item m-header"
        @(!string.IsNullOrEmpty(UiThemeCustomizer.HeaderDesktopMinimizeMode) ? "data-minimize=\"" + UiThemeCustomizer.HeaderDesktopMinimizeMode + "\"" : "")
        @(UiThemeCustomizer.HeaderMobileFixedHeader ? "data-minimize-mobile=\"" + UiThemeCustomizer.HeaderDesktopMinimizeMode + "\"" : "")
        data-minimize-offset="200" data-minimize-mobile-offset="200">
    <div class="m-header__top">
        <div class="m-container @(UiThemeCustomizer.LayoutType == "boxed" ? "m-container--responsive":"m-container--fluid") m-container--xxl m-container--full-height">
            <div class="m-stack m-stack--ver m-stack--desktop">
                <!-- BEGIN: Brand -->
                <div class="m-stack__item m-brand  m-brand--skin-@UiThemeCustomizer.LeftAsideAsideSkin d-print-none">
                    <div class="m-stack m-stack--ver m-stack--general">
                        <div class="m-stack__item m-stack__item--middle m-brand__logo">
                            <a href="@Url.Action("Index", "Home", new {area = string.Empty})" target="_blank" class="m-brand__logo-wrapper">
                                <img id="AppLogo" src="@Model.GetLogoUrl(ApplicationPath, UiThemeCustomizer.LeftAsideAsideSkin)" alt="logo" width="139" height="35" />
                            </a>
                        </div>
                        <div class="m-stack__item m-stack__item--middle m-brand__tools">
                            <!-- BEGIN: Left Aside Minimize Toggle -->
                            @if (UiThemeCustomizer.IsLeftMenuUsed)
                            {
                                if (UiThemeCustomizer.LeftAsideAllowAsideMinimizing)
                                {
                                    <a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
                                        <span></span>
                                    </a>
                                }
                                else if (UiThemeCustomizer.LeftAsideAllowAsideHiding)
                                {
                                    <a href="javascript:;" id="m_aside_left_hide_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
                                        <span></span>
                                    </a>
                                }
                            }

                            <!-- END -->
                            <!-- BEGIN: Responsive Aside Left Menu Toggler -->
                            @if (UiThemeCustomizer.IsLeftMenuUsed)
                            {
                                <a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
                                    <span></span>
                                </a>
                            }
                            <!-- END -->
                            <!-- begin::Responsive Header Menu Toggler-->
                            @if (UiThemeCustomizer.IsTopMenuUsed)
                            {
                                <a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
                                    <span></span>
                                </a>
                            }
                            <!-- end::Responsive Header Menu Toggler-->
                            <!-- BEGIN: Topbar Toggler -->
                            <a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
                                <i class="flaticon-more" aria-label="@L("Toggle")"></i>
                            </a>
                            <!-- BEGIN: Topbar Toggler -->
                        </div>
                    </div>
                </div>
                <!-- END: Brand -->
                <div class="m-stack__item m-stack__item--fluid m-header-head d-print-none" id="m_header_nav">
                    <!-- BEGIN: Topbar -->
                    <div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
                        <nav class="m-stack__item m-topbar__nav-wrapper"
                             aria-label="@L("TopMenu")">
                            <ul class="m-topbar__nav m-nav m-nav--inline"
                                aria-label="@L("TopMenu")"
                                role="menubar">
                                @if (Model.Languages.Count > 1)
                                {
                                    <li class="m-nav__item m-dropdown m-dropdown--large m-dropdown--arrow m-dropdown--align-center m-dropdown--mobile-full-width m-dropdown--skin-light m-list-search m-list-search--skin-light m-dropdown--open dropdown-language"
                                        aria-haspopup="true">
                                        <a href="javascript:;" class="m-nav__link m-dropdown__toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"
                                           role="menuitem"
                                           aria-haspopup="true"
                                           aria-expanded="false"
                                           tabindex="-1">
                                            <i class="@Model.CurrentLanguage.Icon" aria-label="@Model.CurrentLanguage.Icon"></i>
                                            <span class="m-menu__link-text langname">
                                                @Model.CurrentLanguage.DisplayName
                                            </span>
                                            <i class="fa fa-angle-down"></i>
                                        </a>
                                        <ul class="dropdown-menu"
                                            aria-label="@L("Languages")"
                                            role="menu">
                                            @foreach (var language in Model.Languages.Where(language => language.Name != Model.CurrentLanguage.Name))
                                            {
                                                <li role="none">
                                                    <a href="~/AbpLocalization/ChangeCulture?cultureName=@language.Name&returnUrl=@Context.Request.Path"
                                                       role="menuitem"
                                                       aria-haspopup="true"
                                                       aria-expanded="false"
                                                       tabindex="-1">
                                                        <i class="@language.Icon"></i> @language.DisplayName
                                                    </a>
                                                </li>
                                            }
                                        </ul>
                                    </li>
                                }
                                <li class="m-nav__item m-topbar__notifications m-topbar__notifications--img m-dropdown m-dropdown--large m-dropdown--header-bg-fill m-dropdown--arrow m-dropdown--align-center 	m-dropdown--mobile-full-width" data-dropdown-toggle="click" data-dropdown-persistent="true" id="header_notification_bar">

                                </li>
                                <li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
                                    <a href="#" class="m-nav__link m-dropdown__toggle"
                                       role="menuitem"
                                       aria-haspopup="true"
                                       aria-expanded="false"
                                       tabindex="0">
                                        <span class="m-topbar__username m--font-primary">
                                            @if (Model.IsImpersonatedLogin)
                                            {
                                                <i class="fa fa-reply m--font-danger"></i>
                                            }
                                            @Html.Raw(Model.GetShownLoginName())
                                        </span>
                                        <span class="m-topbar__userpic">
                                            <img alt="" class="header-profile-picture m--img-rounded m--marginless m--img-centered" src="@Url.Action("GetProfilePicture", "Profile", new {area = string.Empty})?t=@Clock.Now.Ticks.ToString()" />
                                        </span>
                                    </a>
                                    <div class="m-dropdown__wrapper">
                                        <span class="m-dropdown__arrow m-dropdown__arrow--right m-dropdown__arrow--adjust"></span>
                                        <div class="m-dropdown__inner">
                                            <div class="m-dropdown__header m--align-center" style="background: url(@(ApplicationPath)metronic/dist/html/@theme/assets/demo/@theme/media/img/misc/user_profile_bg.jpg); background-size: cover;">
                                                <div class="m-card-user m-card-user--skin-dark">
                                                    <div class="m-card-user__pic">
                                                        <img alt="" class="header-profile-picture m--img-rounded m--marginless m--img-centered" src="@Url.Action("GetProfilePicture", "Profile", new {area = string.Empty})?t=@Clock.Now.Ticks.ToString()" />
                                                    </div>
                                                    <div class="m-card-user__details">
                                                        <span class="m-card-user__name m--font-weight-500">
                                                            @Html.Raw(Model.GetShownLoginName())
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="m-dropdown__body">
                                                <nav class="m-dropdown__content" aria-label="@L("UserAccount")">
                                                    <ul class="m-nav m-nav--skin-light"
                                                        aria-label="@L("UserAccount")"
                                                        role="menu">
                                                        @if (Model.IsImpersonatedLogin)
                                                        {
                                                            <li class="m-nav__item" role="none">
                                                                <a href="#" class="m-nav__link"
                                                                   role="menuitem"
                                                                   aria-haspopup="true"
                                                                   aria-expanded="false"
                                                                   tabindex="-1">
                                                                    <i class="m-nav__link-icon fa fa-reply m--font-danger"></i>
                                                                    <span class="m-nav__link-title">
                                                                        <span class="m-nav__link-wrap">
                                                                            <span id="UserProfileBackToMyAccountButton" class="m-nav__link-text">
                                                                                @L("BackToMyAccount")
                                                                            </span>
                                                                        </span>
                                                                    </span>
                                                                </a>
                                                            </li>
                                                            <li class="m-nav__separator m-nav__separator--fit"></li>
                                                        }
                                                        <li class="m-nav__item" role="none">
                                                            <a href="#" class="m-nav__link"
                                                               role="menuitem"
                                                               aria-haspopup="true"
                                                               aria-expanded="false"
                                                               tabindex="-1">
                                                                <i class="m-nav__link-icon flaticon-user-settings"></i>
                                                                <span class="m-nav__link-title">
                                                                    <span class="m-nav__link-wrap">
                                                                        <span id="ManageLinkedAccountsLink" class="m-nav__link-text">
                                                                            @L("ManageLinkedAccounts")
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                            <ul id="RecentlyUsedLinkedUsers" class="m-nav linked-accounts"
                                                                aria-label="@L("LinkedAccounts")"
                                                                role="menu"></ul>
                                                        </li>
                                                        <li class="m-nav__separator m-nav__separator--fit" role="none"></li>
                                                        <li class="m-nav__item" role="none">
                                                            <a href="#" class="m-nav__link"
                                                               role="menuitem"
                                                               aria-haspopup="true"
                                                               aria-expanded="false"
                                                               tabindex="-1">
                                                                <i class="m-nav__link-icon flaticon-more-v6"></i>
                                                                <span class="m-nav__link-title">
                                                                    <span class="m-nav__link-wrap">
                                                                        <span id="UserProfileChangePasswordLink" class="m-nav__link-text">
                                                                            @L("ChangePassword")
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item" role="none">
                                                            <a href="#" class="m-nav__link"
                                                               role="menuitem"
                                                               aria-haspopup="true"
                                                               aria-expanded="false"
                                                               tabindex="-1">
                                                                <i class="m-nav__link-icon flaticon-list"></i>
                                                                <span class="m-nav__link-title">
                                                                    <span class="m-nav__link-wrap">
                                                                        <span id="ShowLoginAttemptsLink" class="m-nav__link-text">
                                                                            @L("LoginAttempts")
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item" role="none">
                                                            <a href="#" class="m-nav__link"
                                                               role="menuitem"
                                                               aria-haspopup="true"
                                                               aria-expanded="false"
                                                               tabindex="-1">
                                                                <i class="m-nav__link-icon flaticon-profile-1"></i>
                                                                <span class="m-nav__link-title">
                                                                    <span class="m-nav__link-wrap">
                                                                        <span id="UserProfileChangePictureLink" class="m-nav__link-text">
                                                                            @L("ChangeProfilePicture")
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                        <li class="m-nav__item" role="none">
                                                            <a href="#" class="m-nav__link"
                                                               role="menuitem"
                                                               aria-haspopup="true"
                                                               aria-expanded="false"
                                                               tabindex="-1">
                                                                <i class="m-nav__link-icon flaticon-cogwheel"></i>
                                                                <span class="m-nav__link-title">
                                                                    <span class="m-nav__link-wrap">
                                                                        <span id="UserProfileMySettingsLink" class="m-nav__link-text">
                                                                            @L("MySettings")
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                        @if (!Model.HasUiCustomizationPagePermission)
                                                        {
                                                            <li class="m-nav__item" role="none">
                                                                <a href="@Url.Action("Index", "UiCustomization")" class="m-nav__link"
                                                                   role="menuitem"
                                                                   aria-haspopup="true"
                                                                   aria-expanded="false"
                                                                   tabindex="-1">
                                                                    <i class="m-nav__link-icon flaticon-medical"></i>
                                                                    <span class="m-nav__link-title">
                                                                        <span class="m-nav__link-wrap">
                                                                            <span class="m-nav__link-text">
                                                                                @L("VisualSettings")
                                                                            </span>
                                                                        </span>
                                                                    </span>
                                                                </a>
                                                            </li>
                                                        }
                                                        <li class="m-nav__separator m-nav__separator--fit" role="none"></li>
                                                        <li class="m-nav__item" role="none">
                                                            <a href="@Url.Action("Logout", "Account", new {area = string.Empty})" class="btn m-btn--pill btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder"
                                                               role="menuitem"
                                                               aria-haspopup="true"
                                                               aria-expanded="false"
                                                               tabindex="-1">@L("Logout")</a>
                                                        </li>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                @if (isChatEnabled)
                                {
                                    <li id="chat_is_connecting_icon" class="m-nav__item m-topbar__notifications m-topbar__notifications--img m-dropdown m-dropdown--large m-dropdown--header-bg-fill m-dropdown--arrow m-dropdown--align-center 	m-dropdown--mobile-full-width">
                                        <a href="javascript:;" class="m-nav__link"
                                           role="menuitem"
                                           aria-haspopup="true"
                                           aria-expanded="false"
                                           tabindex="-1">
                                            <span class="m-nav__link-icon">
                                                <img src="/Common/Images/loading.gif" style="width: 23px;" tooltip="@L("ChatIsConnecting")" placement="left" />
                                            </span>
                                        </a>
                                    </li>
                                    <li id="m_quick_sidebar_toggle" class="m-nav__item d-none">
                                        <a href="#" class="m-nav__link m-dropdown__toggle"
                                           role="menuitem"
                                           aria-haspopup="true"
                                           aria-expanded="false"
                                           tabindex="-1">
                                            <span class="m-nav__link-icon">
                                                <i class="flaticon-chat"></i>
                                            </span>
                                            <span class="m-badge m-badge--danger d-none" id="UnreadChatMessageCount">0</span>
                                        </a>
                                    </li>
                                }
                            </ul>
                        </nav>
                    </div>
                    <!-- END: Topbar -->
                </div>
            </div>
        </div>
    </div>
    @if (UiThemeCustomizer.IsTopMenuUsed)
    {
        <div class="m-header__bottom m-aside-menu--skin-@UiThemeCustomizer.LeftAsideAsideSkin">
            @await Component.InvokeAsync(typeof(AppAreaNameMenuViewComponent), new { currentPageName = ViewBag.CurrentPageName })
        </div>
    }

    @if (AbpSession.MultiTenancySide != MultiTenancySides.Host)
    {
        if (IsGranted(AppPermissions.Pages_Administration_Tenant_SubscriptionManagement) &&
            (Model.LoginInformations.Tenant.IsInTrialPeriod || Model.LoginInformations.Tenant.SubscriptionIsExpiringSoon(Model.SubscriptionExpireNootifyDayCount)))
        {
            <style>
                @@media (min-width: 993px) {
                    .m-header--fixed .m-body,
                    .m-aside-left--fixed.m-header--fixed .m-aside-left, .m-aside-left--fixed.m-header--static .m-aside-left {
                        margin-top: 30px !important;
                    }
                }
            </style>
            <div class="alert subscription-info">
                @if (Model.LoginInformations.Tenant.IsInTrialPeriod && !Model.LoginInformations.Tenant.SubscriptionIsExpiringSoon(Model.SubscriptionExpireNootifyDayCount))
                {
                    @Html.Raw(L("TrialSubscriptionNotification",
                             "<strong>" + Model.LoginInformations.Tenant.Edition.DisplayName + "</strong>",
                             "<a href='" + Url.Action("Buy", "Payment", new { area = "", editionId = Model.LoginInformations.Tenant.Edition.Id, editionPaymentType = EditionPaymentType.BuyNow }) + "'>" + L("ClickHere") + "</a>")
                             )
                }
                @if (Model.LoginInformations.Tenant.SubscriptionIsExpiringSoon(Model.SubscriptionExpireNootifyDayCount))
                {
                    <a href="@Url.Action("Index", "SubscriptionManagement", new {area = "AppAreaName"})">
                        @if (Model.LoginInformations.Tenant.IsInTrialPeriod)
                        {
                            <span><i class="fa fa-exclamation-circle"></i> @L("TrialExpireNotification", Model.LoginInformations.Tenant.GetSubscriptionExpiringDayCount())</span>
                        }
                        else
                        {
                            <span><i class="fa fa-exclamation-circle"></i> @L("SubscriptionExpireNotification", Model.LoginInformations.Tenant.GetSubscriptionExpiringDayCount())</span>
                        }
                    </a>
                }
            </div>
        }
    }

</header>



<script id="linkedAccountsSubMenuTemplate" type="x-tmpl-mustache">
    {{#items}}
    <li class="m-nav__item">
        <a href="" data-user-id="{{id}}" data-tenant-id="{{tenantId}}" class="recently-linked-user m-nav__link">
            <span class="m-nav__link-bullet m-nav__link-bullet--dot">
                <span></span>
            </span>
            <span class="m-nav__link-text">
                {{shownUserName}}
            </span>
        </a>
    </li>
    {{/items}}
</script>
<script id="headerNotificationBarTemplate" type="x-tmpl-mustache">
    <a href="#" class="m-nav__link m-dropdown__toggle" id="m_topbar_notification_icon{{^unreadMessageExists}}_not{{/unreadMessageExists}}">
        <span class="m-nav__link-badge m-badge m-badge--dot m-badge--dot-small {{#unreadMessageExists}}m-badge--danger{{/unreadMessageExists}}"></span>
        <span class="m-nav__link-icon">
            <i class="flaticon-music-2" aria-label="@L("Notifications")"></i>
        </span>
    </a>
    <div class="m-dropdown__wrapper">
        <span class="m-dropdown__arrow m-dropdown__arrow--center"></span>
        <div class="m-dropdown__inner">
            <div class="m-dropdown__header m--align-center" style="background: url(@(ApplicationPath)metronic/dist/html/@theme/assets/demo/@theme/media/img/misc/notification_bg.jpg); background-size: cover;">
                <span class="m-dropdown__header-title">
                    {{unreadCount}} @L("NewNotifications")
                </span>
            </div>
            <div class="m-dropdown__body">
                <div class="m-dropdown__content">
                    <div class="row">
                        <div class="text-left col-md-8">
                            {{#unreadCount}}
                            <a href="" id="setAllNotificationsAsReadLink">@L("SetAllAsRead")</a>
                            {{/unreadCount}}
                        </div>
                        <div class="text-right col-md-4">
                            <a id="openNotificationSettingsModalLink" class="text-right" href="">@L("Settings")</a>
                        </div>
                    </div>
                    <hr />
                    <div class="m-scrollable" data-scrollable="true" data-max-height="250" data-mobile-max-height="200">
                        <div class="m-list-timeline m-list-timeline--skin-light m-nav">
                            <div class="m-list-timeline__items {{^notifications.length}}empty{{/notifications.length}}">
                                {{#notifications}}
                                <div class="m-list-timeline__item user-notification-item {{#url}}user-notification-item-clickable{{/url}} {{#isUnread}}user-notification-item-unread{{/isUnread}}" " data-url="{{url}}">
                                    <span class="m-list-timeline__badge m-list-timeline__badge--success"></span>
                                    <span class="m-list-timeline__icon {{icon}}"></span>
                                    <span class="m-list-timeline__text">
                                        {{text}}
                                    </span>
                                    <span class="m-list-timeline__time">
                                        {{timeAgo}}
                                        {{#isUnread}}
                                        <span>
                                            <a href="javascript:;" data-notification-id="{{userNotificationId}}" class="m-link set-notification-as-read">@L("SetAsRead")</a>
                                        </span>
                                        {{/isUnread}}
                                    </span>
                                </div>
                                {{/notifications}}
                                {{^notifications.length}}
                                <span class="notification-empty-text">
                                    @L("ThereIsNoNotification")
                                </span>
                                {{/notifications.length}}
                            </div>
                            {{#notifications.length}}
                            <div class="m-nav__separator m-nav__separator--fit"></div>
                            <div class="external notifications-footer">
                                <div class="text-center"><a href="@Url.Action("Index", "Notifications", new {area = "AppAreaName"})">@L("SeeAllNotifications")</a></div>
                            </div>
                            {{/notifications.length}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</script>